/*******************右侧功能栏********************************/
var rights = document.querySelector('.fixed').children;
var fixop = rights[0];
var poption = rights[1];
var fixlis = fixop.children[0].children;
var poptionlis = poption.children;
for (let i = 0; i < fixlis.length - 1; i++) {
    fixlis[i].index = i;
    fixlis[i].addEventListener('mouseover', function () {
        poption.className = "poption";
        for (let j = 0; j < poptionlis.length; j++) {
            fixlis[j].className = "";
            poptionlis[j].style.display = "none";
        }
        poptionlis[this.index].style.top += 60 * i + 'px';
        poptionlis[this.index].style.display = 'block';
    })
}
fixop.addEventListener('mouseout', function () {
    poption.className = 'poption hide'
})
poption.addEventListener('mouseout', function () {
    poption.className = 'poption hide'
})
//回到顶部效果
$(fixlis[4]).on('click', function () {
    $('body,html').animate({
        scrollTop: 0,
    }, 300)
});
/*************************************************************/
$(function () {
    if (userInfo) {
        // 用户已经登录
        $.get(baseUrl + '/cart/lists', { userId: userInfo.id }, (res) => {
            // 调用自定义的函数实现页面上数据显示
            showUserCart(res.data);
        }, 'json');
    } else {
        // 用户没有登录
        $('.shopping .true').css("display", "none");
        $('.shopping .false').css("display", "block");
        let login = document.querySelector('.false>button');
        login.onclick = function () {
            location.href = "login.html"
        }
        // 先从localstorage中获取到购物车信息
        let userCart = localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : {};
        console.log(userCart);
        // 循环的目的是为了组装一个数组，后面发送请求
        let goodsIds = [];
        for (let key in userCart) {
            // 每一次循环key表示商品的ID
            goodsIds.push(key);
        }
        console.log(userCart);
        if (goodsIds.length > 0) {
            $.post(baseUrl + '/goods/getGoodsByIds', { goodsIds }, (res) => {
                let data = [];//保存结果
                console.log(res);
                res.data.forEach((item, index) => {
                    data.push({
                        goodsId: item.id,
                        goodsCount: userCart[item.id],
                        goods: item
                    })
                });
                console.log(data);
                showUserCart(data);
            }, 'json');
        }
    }
    // 增加数量
    $('.mycart ').on('click', '.add_num', function () {
        // 获取现在的商品数量  this 表示点击的对象。按照原生this应该代表父元素的dom对象
        let goodsCount = parseInt($(this).prev().text());
        // $(this).parent().parent() 表示当前需要修改的tr标签对应的jQuery对象
        changeGoodsNumber(goodsCount + 1, $(this).parent().parent());
    })
    // 减少数量
    $('.mycart').on('click', '.reduce_num', function () {
        let goodsCount = parseInt($(this).next().text());
        if (goodsCount > 1) {
            changeGoodsNumber(goodsCount - 1, $(this).parent().parent());
        }
    })
    function changeGoodsNumber(goodsCount, elem) {
        // 修改显示的数量
        elem.find('.amount').val(goodsCount);
        // 修改小计金额
        let money = goodsCount * elem.find('.col4').text()
        elem.find('.col5').text(money);

        let goodsId = elem.data('goodsid');
        if (!userInfo) {
            // 没有登录
            let userCart = localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : {};
            // 修改购物车数据中商品数量
            userCart[goodsId] = goodsCount;
            localStorage.setItem('cart', JSON.stringify(userCart));
        } else {
            // 已经登录
            let data = {
                userId: userInfo.id,
                cartId: elem.data('cratid'),
                goodsId,
                goodsCount
            }
            $.post(baseUrl + '/cart/change', data, (res) => {

            });
        }
    }
    // 根据购物车数据实现显示商品信息
    function showUserCart(data) {
        console.log(data);
        let html = '';
        data.forEach((item, index) => {
            html += `
            <tr class="commodity">
                        <th><input type="checkbox" class="input" value="1"></th>
                        <th class="content"><img src="${item.goods.goodsThumb}" width="100px" height="100px">
                           <p>${item.goods.goodsName} </p>
                        </th>
                        <th class="col3"><button type="button" class="reduce_num">
                              -
                           </button> <span class="amount">
                              ${item.goodsCount}
                           </span> <button type="button" class="add_num">
                              +
                           </button></th>
                        <th class="col4">
                           ￥${item.goods.shopPrice}
                        </th>
                        <th class="col5">
                           ￥${item.goodsCount * item.goods.shopPrice}
                        </th>
                        <th><a href="javascript:;" class="glyphicon glyphicon-remove">删除
                           </a></th>
                     </tr>`;
        });
        $('.shoppingBar table>tbody').html(html);
    }
    // 点击结算事件
    $('.checkout').click(function(){
        if(!userInfo){
            // 用户没有登录的情况  
            // 获取到当前被勾选商品ID 不能传递购物车ID。最终商品ID的信息通过登录后回跳就可以获取到。最后在做选中判断
            // 保存当前被选中的商品ID
            let selectedGoods = [];
            $('.cartIds:checked').each((index,elem)=>{
                selectedGoods.push($(elem).parent().parent().data('goodsid'));
            });
            // encodeURIComponent属于js内置的函数可以将URL进行编码转移
            let callback = encodeURIComponent('http://shop2112.com/cart.html?selectedGoods='+selectedGoods.join(','));
            location.href = 'login.html?callback='+callback;
        }
        return false;
    })
})

//在上面的功能中，当没有登录的情况下，先从localstorage中获取到了购物车数据，然后在通过购物车的商品ID调用接口得到商品信息，未登录状态下整个数据由2个变量构成，所以需要将两个变量的数据融合到一个变量中最后调用showUserCart函数进行渲染，由于目前showUserCart已经以登录状态下数据格式进行了显示，所以需要将未登录状态下的格式转换为登录状态的格式(数组中每个元素为对象，对象下存在goodsId、goodsCount、goods属性)
//在转换过程中建议以未登录下获取到商品的数据为基准进行循环
